<template>
	<view class="wap">
		<view class="vip_user">
			<view class="user_info">
				<view class="bg">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716280318383267.png" mode="aspectFill" v-if="user.UserType!='普通用户'"></image>
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715410002377277.png" mode="aspectFill" v-else></image>
				</view>
				<view class="info_box">
					<view class="info_head">
						<image :src="user.HeadImgUrl?user.HeadImgUrl:''" mode="aspectFill"></image>
					</view>
					<view class="info_text">
						<view class="info_name">
							{{user.Name?$util.entitiesToUtf16(user.Name):''}}
						</view>
						<view class="info_lit">
							{{user.UserType!='普通用户' ? '有效期至'+getTime2(ExpiredUser.ExpiredDate) :'开通会员享更多权益'}}
						</view>
					</view>
				</view>
				<!-- <view class="info_btn">
					立即{{user.UserType!='普通用户' ? '续费' : '开通'}}
					<uni-icons type="right" size="14" color="#E1D0AB"></uni-icons>
				</view> -->
			</view>
			<view class="vip_tab" v-if="vipIcon.length">
				<view class="tab_list" v-for="(item,index) in vipIcon" :key="index">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="tab_tit">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="vip_info">
			<view class="price_tab" v-if="priceTab.length">
				<view :class="['price_cell',priceIndex==index?'price_active':'']"  v-for="(item,index) in priceTab" :key="index" @click="priceIndex=index">
					<view class="cell_tips" v-if="item.bean">
						送{{item.bean}}挥豆
					</view>
					<view class="cell_time" v-if="item.Num">
						{{item.Num}}个月
					</view>
					<view class="cell_price">
						<text class="cell_unit">￥</text>
						{{item.Promotion || item.Fee}}
					</view>
					<view class="cell_lit" :class="item.Promotion ? '':'hide'">
						￥{{item.Fee}}
					</view>
				</view>
			</view>
			<view class="serve">
				<view class="serve_tit">
					服务权益
				</view>
				<view class="serve_img">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715653989943876.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="vip_tips">
				温馨提示
				<view>
					1、挥友圈会员为本平台向您提供的会员增值服务，充值成功后不可转让，不支持退款，充值前请谨慎选择
				</view>
				<view>
					2、挥友圈不鼓励未成年使用充值服务活动由挥友圈提供，与苹果公司 App.inc 无关系
				</view>
				
			</view>
		</view>
		
		<view style="height: 180rpx;"></view>
		<view class="pay_box">
			<view class="pay_clause" @click="isAgree=true">
				<radio :checked="isAgree" color="#dbac81" style="transform:scale(0.7)"></radio>
				我已阅读并同意<text @click.stop="nav_to('/pages/user/about?id=2&title=挥友圈会员服务')">《挥友圈会员服务》</text>
			</view>	
			<view class="pay_btn">
				<view class="pay_price">
					<view class="price_num">
						<text>￥</text>{{payPrice.Promotion || payPrice.Fee}}
					</view>
					<view class="pay_coupon"  v-if="payPrice.Promotion">
						￥{{payPrice.Fee || '--'}}
					</view>
				</view>
				<view class="paybtn" @click="submit">
					确认协议并{{user.UserType!='普通用户' ? '续费' : '开通'}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import addUserIcon from './superMember/icon_jhy.svg' // 加好友
	// import addWeChatIcon from './superMember/icon_wx.svg' // 加微信
	// import userFilterIcon from './superMember/icon_shaixuan.svg' // 用户筛选
	// import serviceIcon from './superMember/icon_srkf.svg' // 私人客服
	// import medalIcon from './superMember/icon_hyxz.svg' // 专属勋章
	// import whoLookIcon from './superMember/icon_ck.svg' // 谁看过我
	// import roomIcon from './superMember/icon_xxzj.svg' // 线下组局
	// import faceIcon from './superMember/icon_ml.svg' // 蒙脸
	// import hiddenIcon from './superMember/icon_ys.svg' // 隐身
	// import serviceKFIcon from './superMember/icon_kf.svg' // 客服代组局

	export default {
		data() {
			return {
				camnum:'',
				isredeem:false,
				currObj: {},
				Issex:'',
				end_vip:null,
				memberList: [{
						levelcolor:'color: #3D2003',
						vipimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17116923928151009.png',
						id: 1,
						name: '月卡会员',
						bar:'linear-gradient(to right,#945f2f,#ca9458)',
						barbg:'background-color: #E1BB7B;',
						price: '198',
						nv_price:'99',
						initial: '',
						background: 'background: linear-gradient(90deg, #FBE9C0 0%, #E8BC76 100%);',
						backgroundimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124826700691167.png',
						color: 'color: #3D2003',
						iconBg: 'background: rgb(195,153,79)',
						endvip:'font-size: 28rpx;color: #3D2003;',
						privileges: [{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110944128761265.png',
								content: '加好友',
								desc: '无限制'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110944934061491.png',
								content: '加微信',
								desc: '无限制'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110945242741198.png',
								content: '上推荐频道',
								desc: '每月3次机会，每次24小时，让更多人看到你'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110945441801051.png',
								content: '“Superlike”',
								desc: '每天5个“Superlike”,对方会收到你喜欢Ta的通知'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711094557767271.png',
								content: '谁看过我',
								desc: '看看谁看了你'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171109457175142.png',
								content: '专属勋章',
								desc: '平台展示专属身份勋章'
							}
						]
					},
					{
						levelcolor:'color: #FCF0DA',
						id: 5,
						vipimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17116923481061090.png',
						name: '年卡会员',
						bar:'linear-gradient(to right, #443d35, #867969);',
						barbg:'background-color: #b9af9f;',
						price: '1980',
						nv_price:'990',
						initial: '金卡会员',
						background: 'background: linear-gradient(135deg, #6C645E 0%, #1E2129 100%);',
						backgroundimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124819559641290.png',
						color: 'color:#FCF0DA',
						iconBg: 'background: rgb(97,97,97)',
						endvip:'color: #FCF0DA;font-size: 28rpx;',
						privileges: [	
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110169839081313.png',
							// 	content: '线下活动',
							// 	desc: '免费参与官方线下活动或比赛，每月一次，过期不累计'
							// },
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110170373121273.png',
							// 	content: '蒙脸',
							// 	desc: '不显示头像和封面'
							// },
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110170721971306.png',
							// 	content: '隐身',
							// 	desc: '不在会员页面出现'
							// },
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110170974281393.png',
							// 	content: '一键开聊',
							// 	desc: '无需等对方通过好友，直接和理想型对话'
							// }
						]
					},
					// {
					// 	levelcolor:'color: #FCF0DA',
					// 	id: 5,
					// 	vipimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711692318004562.png',
					// 	name: '黑金年卡会员',
					// 	bar:'linear-gradient(to right, #6f543c, #b39473);',
					// 	barbg:'background-color:#6b593e;',
					// 	price: '12000',
					// 	initial: '黑金卡会员',
					// 	background: 'background: linear-gradient(135deg, #73685B 0%, #2A2722 100%);',
					// 	color: 'color:white',
					// 	iconBg: 'background: rgb(193,120,84)',
					// 	endvip:'color: #FCF0DA;font-size: 28rpx;',
					// 	privileges: [
					// 		{
					// 			hievip:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711702781807287.png',
					// 			icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711017311265530.png',
					// 			content: '私人定制球局',
					// 			desc: '邀请心仪用户参与你的球局'
					// 		}
					// 	]
					// }
				],
				currentIndex: 0,
				is_frist_upgrade: false,
				levelInfo:{},
				boardInfo:[],
				vipstyle:null,
				
				vipIcon:[
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715653464158724.png',
						title:'会员福利'
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715653524662990.png',
						title:'免担保金'
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715653483172869.png',
						title:'每日签到'
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715653498633116.png',
						title:'会员徽章'
					}
				],
				priceTab:[],
				priceIndex:1,
				isAgree:false,
				ExpiredUser:{},
				user:{}
			}
		},
		computed:{
			payPrice(){
				let con = this.priceTab[this.priceIndex]
				return con
			}
		},
		onLoad(e) {
			
			if (e.t == 1) {
				this.currentIndex = 0;
			} else if (e.t == 2) {
				this.currentIndex = 1;
			} else if (e.t == 3) {
				this.currentIndex = 2;
			}
			this.Issex = uni.getStorageSync('user').Sex
			this.end_vip = uni.getStorageSync('user').End_Date
			this.vipstyle = uni.getStorageSync('user').UserType
			this.init();

		},
		onShow() {
			this.getUserInfo()
			// this.$util.getSystemUtils()
		},
		methods: {
			async getUserInfo() {
				let u = uni.getStorageSync('user');
				let res = await this.$api.post('User/GetUserInfo', {
					ID: u.UserID
				});
			
				this.user = res.data;
			
				uni.setStorageSync('user', this.user);
			
				this.$store.commit('setUser', this.user);
			
			},
			async vipTab(){
				let res = await this.$api.post('Common/GetUserTypeDetail')
				this.priceTab = res.data || []
			},
			async vipEnd(){
				let res = await this.$api.post('/User/IsExpiredUser')
				this.ExpiredUser = res.data
			},
			async submit(){
				if(!this.isAgree){
					this.$pv.msg('请先阅读并同意《会员服务协议》')
					return
				}
				let pres = await this.$api.post('/Payment/Pay', {
					CompanyID: 6003,
					total_fee: this.payPrice.Promotion ? this.payPrice.Promotion : this.payPrice.Fee,
					// total_fee: 0.01,
					EventType: '会员升级',
					EventID:this.payPrice.ID,
					body: 'VIP',
					SourcePage:'apply_member',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				if(pres.data==0){
					this.$pv.msg('余额支付成功')
					this.vipEnd()
					return
				}
				if(pres.data==null){
					this.$pv.msg(pres.message)
					return
				}
				let _this = this;
				let payObj = JSON.parse(pres.data);
				
				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async function(res) {
						_this.$pv.msg('支付成功');
						setTimeout(() => {
							_this.upDateInfo();
							this.vipEnd()
						}, 500);
				
						_this.nav_back(2000);
					},
					fail: function(err) {
						console.log(err);
						_this.$pv.msg('支付失败');
					}
				});
			},
			//卡密兑换
			async ChangeCard(){
				let res = await this.$api.post('Coupon/ChangeCard',{
					Code:this.camnum,
					CompanyID:'',
				})
				if(res.data){
					this.isredeem = false
				}
			},
			Camibtn(){
				this.isredeem = true
			},
			closecoupon(){
				this.isredeem = false
			},


			getTime2(l) {
					let d = new Date(l);
					let timestamp = d.getTime();
					return this.$u.date(timestamp, 'yyyy-mm-dd');
			},
			async init() {
				// this.vipTab()
				// this.vipEnd()
				let u = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').ID
				});
				
				this.user = u.data;
				if(this.user.UserType=='金卡会员'){
					this.currentIndex=0;
				}
				else if(this.user.UserType=='黑金卡会员'){
					this.currentIndex=1;
				}else if(this.user.UserType=='黑金年卡会员'){
					this.currentIndex=2;
				}

				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'apply_member',
					Platform: uni.getStorageSync('platform')
				});

				// let res = await this.$api.post('Member/GetUserType', {
				// 	CompanyID: 6003
				// });
				// if(res.data){
				// 	res.data.map((item) => {
				// 		this.memberList.map((list, index) => {
				// 			if (item.ID == list.id) {
				// 				this.memberList[index] = {
				// 					...list,
				// 					...item
				// 				}
				// 			}
				// 		})
				// 	})
				// 	this.memberList = [...this.memberList]
				// }
				// console.log('=======');
				// console.log(this.memberList);
				// this.currObj = this.memberList[this.currentIndex];

				// let mf_data = await this.$api.post('/Member/IsFirstUpgrade');
				// this.is_frist_upgrade = mf_data.data;
				
				// //财富等级
				// let level = await this.$api.post('Member/GetWealthInfo',{UserID:uni.getStorageSync('user').UserID})
				// let con = level.data
				// this.levelInfo = level.data
				// this.levelInfo.rote = parseFloat((con.Current_Consume-con.Start_Consume)/(con.End_Consume-con.Start_Consume)).toFixed(2)*100
				
				// let board = await this.$api.post('Member/WealthDescription')
				// this.boardInfo = board.data
			},
			async upDateInfo() {
				let res = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});
				let user = res.data;
				user.UserID = res.data.ID;
				uni.setStorageSync('user', user);
				this.$store.commit('setUser', user);

			},
			swiperChange(e) {
				this.currentIndex = e.detail.current;
				this.currObj = this.memberList[this.currentIndex];


			},
			levelFun(){
				this.$refs.board.open()
			},
			levelClose(){
				this.$refs.board.close()
			}
		}
	};
</script>

<style lang="scss">
page{
	// background: linear-gradient(180deg, #57514F 0%, #191C20 100%);
	background-color: #fff;
}
.hide{
	opacity: 0;
}
.placename{
	font-size: 32rpx;
	color: #999999;
	line-height: 88rpx;
}
.Camibox{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	top: 0;
	left: 0;
	.vipbox{
		position: relative;
		width: 640rpx;
		height: 426rpx;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713510378171190.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		// background-color: #fff;
		.btnbox{
			display: flex;
			justify-content: center;
			.cancel{
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				background-color: #f6f6f6;
				font-size: 24rpx;
				color: #333333;
				margin-right: 106rpx;
			}
			.ack{
				width: 392rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				background-color: #0d0d0d;
				font-size: 32rpx;
				color: #fff;
			}
		}
		input{
			width: 560rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			background-color: #F6F6F6;
			margin: 0 auto;
			margin-bottom: 48rpx;
			color: #999999;
			font-size: 32rpx;
			text-align: center;
		}
		.title{
			font-size: 36rpx;
			color: #0D0D0D;
			font-weight: 600;
			margin-top: 56rpx;
			margin-bottom: 48rpx;
		}
		.closeimg{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 32rpx;
			right:32rpx;
		}
	}
}
	.wap {
		padding: 0 !important;
		position: relative;
		// background: linear-gradient(180deg, #57514F 0%, #191C20 100%);
		.blackbox{
			position: fixed;
			left: 30rpx;
			top: 63rpx;
			z-index: 2000;
			display: flex;
			.blackimg{
				width: 52rpx;
				height: 52rpx;
			}
			.blacktext{
				font-size: 36rpx;
				font-weight: 600;
				color: #fff;
				margin-left: 216rpx;
			}
		}
		.member-swiper {
			padding-top: 50rpx;
			height: 380rpx;
		}
		.beijingbox{
			width: 750rpx;
			height: 382rpx;
			background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171159583482530.png');
			background-size: cover;
			background-repeat: no-repeat;
		}
		.member-card-wrap {
			padding: 0 12rpx;
		}

		.member-card {
			background-color: white;
			color: black !important;
			padding: 34rpx;
			border-radius: 42rpx;

			.content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				position: relative;
				.title{
					width: 70%;
					font-size: 42rpx;
					font-weight: 500;
				}
				.userbox{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					height: 80rpx;
					.head{
						image{
							border-radius: 50%;
							width: 80rpx;
							height: 80rpx;
						}
					}
					.infobox{	
						width: 100%;
						margin: -12rpx 0 0rpx 10rpx;
						.info_name{
							font-size: 32rpx;
							color: #3D2003;
							font-weight: 500;
							margin-bottom: 10rpx;
						}
						.gradebox{
							display: flex;
							align-items: center;
							margin-bottom: 12rpx;
							.level{
								font-size: 24rpx;
								font-weight: 400;
								color: #3D2003;
								margin-right: 8rpx;
							}
							.tishi{
								width: 28rpx;
								height: 28rpx;
							}
						}
						.levelbox{
							position: relative;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 20rpx;
							box-sizing: border-box;
							width: 85%;
							height: 10rpx;
							border-radius: 50rpx;
							background-color: #dfc79b;
							background-color: #e0c295;
							view{font-size: 24rpx;color: #fff;font-weight: normal;z-index: 9;}
							.levelbar{
								position: absolute;
								width: 70%;
								height: 100%;
								border-radius: 50rpx;
								// background-image: linear-gradient(to right,#945f2f,#ca9458);
								background-color: #502E0D;
								top: 0;
								left: 0;
							}
							.vip_icon{
								position: absolute;
								right: -56rpx;
								top: 50%;
								transform: translate(-50%,-50%);
								width: 30rpx;
								height: 30rpx;
								image{width: 100%;height: 100%;}
							}
						}
					}
				}
				.title {
					color: black;
					font-weight: bold;

					font-size: 40rpx;
				}

				.frist-tips {
					// margin-top: 10rpx;
					background-color: #ef4034;
					font-size: 22rpx;
					color: #fff;
					line-height: 36rpx;
					width: 102rpx;
					height: 36rpx;
					padding: 6rpx 0;
					border-radius: 30rpx 36rpx 36rpx 0;
					text-align: center;
					position: absolute;
					top: -22rpx;
					right: -102rpx;
				}

				.card-btn {
					border-radius: 36rpx;
					background-image: linear-gradient(to bottom,#FCDFAB,#F0D46D);
					padding: 16rpx 22rpx;
					color: #1F1F1F;
					font-size: 28rpx;
					margin-top: 12rpx;
					font-weight: 600;
				}

				.card-price {
					display: flex;
					align-items: center;
					color: black;
					position: relative;
					.repeatedlybox{
						display: flex;
    					align-items: center;
					}
				}
				.card-num,
				.card-price-unit {
					// font-weight: bold;
					font-size: 28rpx;
				}

				.card-num {
					// margin: 0 8rpx;
					margin-right: 8rpx;
					font-size: 40rpx;
					position: relative;
					font-weight: 600;
				}

				.card-num-line {
					font-size: 28rpx;
					margin: 0 8rpx;
					// color: #9B7D60 !important;
					text-decoration: #000 line-through;
				}
			}

			.content:nth-last-child(1) {
				margin-bottom: 0;
			}

			.card-icon {
				width: 132rpx;
				height: 132rpx;
				margin-right: 8rpx;
			}



		}

		.card-medal-0 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #5817d8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.card-medal-1 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.card-medal-2 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #FEEDDF 0%, #CCAC99 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.card-medal-5 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.sm-card-medal-1 {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.sm-card-medal-2 {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #E3C791 0%, #D09E4C 100%);
			border: 10rpx solid;
			border-radius: 50%;
			text-align: center;
			line-height: 70rpx;
		}

		.sm-card-medal-5 {
			width: 80rpx;
			height: 80rpx;
			// background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			// border: 10rpx solid;
			border-radius: 50%;
			text-align: center;
			line-height: 70rpx;
		}

		.member-privilege,
		.member-privilege-list,
		.member-pass {
			padding: 0 45rpx;
		}

		.member-privilege {
			margin-top: 42rpx;
			.title {
				font-size: 36rpx;
				color: #fff;
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				text{
					font-size: 36rpx;
					color: #fff;
				}
				.camtitle{
				 font-size: 26rpx;
				 text-decoration: underline;
 				font-style: italic;
				/* 斜体 */
			}
			}
		}

		.member-privilege-list {
			margin-top: 20rpx;

			.hasprev-privilege {
				display: flex;
				align-items: center;
				margin-bottom: 44rpx;

				.title-wrap {
					font-size: 32rpx;
					color: white;
				}
			}

			.desc {
				font-size: 24rpx;
				margin-top: 6rpx;
			}

			.title-wrap {
				margin-left: 22rpx;

				.title
				 {
					color: white;
					font-size: 32rpx;
					font-weight: 600;
				}
				.desc{
					color: #999999;
					font-size: 24rpx;
				}
			}

			.privilege-content {
				display: flex;
				align-items: center;
				margin-top: 26rpx;

				.icon-bg {
					border-radius: 50%;
					height: 92rpx;
					width: 92rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.icon {
					border-radius: 50%;
					height: 92rpx;
					width: 92rpx;
					}
				}

				
			}

			.sm-card-icon {
				width: 60rpx;
				height: 60rpx;
				vertical-align: middle;
			}
			.sm-card-heiicon{
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
			}
		}

		.member-pass {
			position: absolute;
			bottom: 55rpx;
			width: 80%;
		}

	}


	.btn {
		margin-top: 60rpx;
		background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
		color: #1F1F1F;
	}
	.scroll{
		width: 80vw;
		height: 70vh;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx 54rpx;
		box-sizing: border-box;
		.board_btn{
			position: sticky;
			bottom: 0rpx;
			background-color: #fff;
			padding-top: 20rpx;
			.btn_{
				width: 140rpx;
				height: 60rpx;
				font-size: 26rpx;
				background-color: #ef4034;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16rpx;
				color: #fff;
				margin: 0 auto;
			}
		}
	}
	.boardbox{
		.titbox{
			padding-bottom: 20rpx;
			position: sticky;
			top: 0rpx;
			view{color: #000;}
			background-color: #fff;
			.title{
				text-align: center;
			}
			.lit{
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
		
		.box{
			display: flex;
			align-items: center;
			
			view{
				border: 2rpx solid #1d1f21;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
				color: #1d1f21;
				font-size: 24rpx;
			}
			.box_item{
				width: 30%;
			}
			.box_num{
				width: 40%;
			}
		}
	}
	
.vip_user{
	background-color: #252422;
	padding: 40rpx 0;
	padding-bottom: 58rpx;
	image{
		width: 100%;
		height: 100%;
	}
	.user_info{
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		margin: 40rpx 24rpx;
		margin-top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			
		}
		.info_box{
			display: flex;
			align-items: center;
			margin-right: 16rpx;
			z-index: 9;
			.info_head{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 16rpx;
			}
			.info_text{
				z-index: 9;
				.info_name{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 4rpx;
				}
				.info_lit{
					font-size: 24rpx;
				}
			}
		}
		.info_btn{
			z-index: 9;
			font-weight: bold;
			font-size: 24rpx;
			color: #E1D0AB;
			padding: 12rpx 24rpx;
			background: linear-gradient( 130deg, #535250 0%, #3C3934 100%);
			border-radius: 28rpx;
			display: flex;
			align-items: center;
		}
	}
	.vip_tab{
		margin-top: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.tab_list{
			padding: 0 44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
			}
			.tab_tit{
				font-size: 24rpx;
				color: #E1D0AB;
			}
		}
	}
	
}
.vip_info{
	padding: 66rpx 30rpx;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	margin-top: -22rpx;
	background: #fff;
	.price_tab{
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: 0.3s all;
		.price_cell{
			position: relative;
			background: #F7F7F7;
			border-radius: 16rpx;
			width: 30%;
			padding: 44rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border: 2rpx solid transparent;
			.cell_time{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 4rpx;
			}
			.cell_price{
				font-size: 56rpx;
				font-weight: bold;
				color: #854F14;
				text{
					color: #854F14;
					font-weight: normal;
				}
				.cell_unit{
					font-size: 36rpx;
				}
			}
			.cell_lit{
				font-size: 24rpx;
				color: #999999;
				text-decoration-line: line-through;
			}
		}
		.price_active{
			background: #FDF5E8;
			border: 2rpx solid #C99857;
		}
		.cell_tips{
			position: absolute;
			left: -2rpx;
			top: -14rpx;
			background: #494748;
			border-radius: 24rpx 24rpx 24rpx 0rpx;
			font-size: 20rpx;
			color: #F0DCB1;
			padding: 4rpx 16rpx;
		}
	}
	.serve{
		.serve_tit{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin: 48rpx 0 32rpx;
		}
		.serve_img{
			// width: 100%;
			// height: 500rpx;
			image{width: 100%;height: 100%;}
		}
	}
}
.vip_tips{
	font-size: 24rpx;
	color: #999999;
	margin: 48rpx 0;
	view{font-size: 24rpx;color: #999999;}
}
.pay_box{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	    z-index: 999;
	padding-bottom: 40rpx;
	background-color: #fff;
	.pay_clause{
		background-color: #FDFAF1;
		padding: 16rpx 32rpx;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		text{
			font-size: 24rpx;
			color: #d9a97d;
		}
	}
	.pay_btn{
		padding: 20rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pay_price{
			display: flex;
			.price_num{
				font-weight: bold;
				font-size: 56rpx;
				color: #854F14;
				text{
					font-size: 36rpx;
					color: #854F14;
				}
			}
			.pay_coupon{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				text-decoration-line: line-through;
				margin-left: 8rpx;
			}
		}
		.paybtn{
			font-weight: bold;
			font-size: 32rpx;
			color: #412B1C;
			background: linear-gradient( 270deg, #F1D599 0%, #F8E8C7 100%);
			border-radius: 48rpx;
			padding: 22rpx 62rpx;
		}
	}
}
</style>